<template>
  <h1>News</h1>
  <button @click="toDetail1">娱乐新闻</button>
  <button @click="toDetail2">体育新闻</button>
  <hr />
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'News',
});
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
/* 
 useRouter
   返回 router 实例，相当于在模板中使用 $router 。必须在 setup() 中调用
*/

const router = useRouter();
const toDetail1 = () => {
  router.push('/home/news/detail');
};

const toDetail2 = () => {
  router.push({
    name: 'Detail',
  });
};
</script>

<style lang="less" scoped></style>
